{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/css/base.css" media="all">
<style>
    html {
        background-color: #f2f2f2 !important;
    }
    .m-table {
        background-color: rgb(255, 255, 255);
        /*margin-top: 5px;*/
        display: none;
        z-index: 1005;
        position: absolute;
        width: 100%;
        /*max-width: 80%;*/
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    #mTable_choose {
        margin: 0 !important;
    }

    .layui-table table tr:hover, .layui-table-hover {
        background-color: #FFF9E6 !important;
    }
</style>
<body>
<div class="layui-fluid layui-anim-fadein">
    <div class="layui-card layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div style="height: 10px"></div>
        <div class="layui-card-body" style="padding-right: 2% !important;">
            <form class="layui-form" action="{:url('pay')}" id="form">
                <input type="hidden" name="ids" value="{$ids}"/>
                <input type="hidden" id="uid" name="uid" value="{$uid}"/>
                <input type="hidden" id="amount" name="amount" value="{$amount}"/>

                <div class="layui-form-item">
                    <label class="layui-form-label">支付金额</label>
                    <div class="layui-input-block">
                        <input type="text" name="amount" value="{$amount}" autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">支付账户</label>
                    <div class="layui-input-block">
                        <select id="pay_way" name="pay_way" lay-verify="required" lay-filter="pay_way"
                                lay-reqtext="请选择要支付的账户" lay-verType="tips">
                            <option value="">请选择</option>
                            <option value="love_bean">爱豆</option>
                            <option value="chain_bean">链豆</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账户余额</label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请选择要充值的账户" autocomplete="off" class="layui-input account_val" disabled>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">支付密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="pay_password" placeholder="请填写支付密码" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-input-block">
                        <button class="layui-btn recharge" lay-filter="pay" lay-submit formObj="#form">支付
                        </button>
                    </div>
                </div>

            </form>
        </div>

    </div>
</div>
</body>
{include file="public/footer" /}
<script>
    layui.use(['form', 'table', 'form'], function () {
        table = layui.table;
        mTable_wrap_choose = $('#mTable_wrap_choose');
        form = layui.form;

        form.on('select(pay_way)', function (data) {
            let uid = $("#uid").val();
            if (data.value) {
                getBalance(data.value, uid)
            } else {
                $('.account_val').val('');
            }
        });

        function getBalance(value, id) {
            if (value && id) {
                $.ajax({
                    type: 'GET',
                    url: '{:url("VideoComment/balance")}',
                    data: {val: value, id: id},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 1) {
                            $('.account_val').val(data.result);
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            }

        }

        //监听表单提交
        form.on('submit(pay)', function (data) {
            layer.load();
            var btn = $(this);
            btn.attr('disabled', true);
            formObj = $($(this).attr('formObj'));
            url = formObj.attr('action');
            $.ajax({
                type: 'POST',
                url: url,
                data: formObj.serialize(),
                dataType: "json",
                success: function (data) {
                    layer.closeAll();
                    if (data.code == 1) {
                        notify.success(data.msg, 1500, function () {
                            let index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.window.location.reload();
                        });
                    } else {
                        notify.error(data.msg);
                        btn.removeAttr('disabled');
                    }
                },
                error(e) {
                    layer.closeAll();
                    btn.removeAttr('disabled');
                }
            });
            return false;
        })



    });
</script>
</html>